<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/10/28
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改页</title>
    <!-- 引入layui.css--->
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <!---引入layui.js-->
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/static/js/jquery-3.5.1.min.js"></script>
    <script src="${path}/static/js/ajaxForm.js"></script>
</head>
<body>
<div class="layui-container">
    <div>
        <form class="layui-form" method="post" action="" id="myForm" lay-filter="formDemo">
            <!--每一行表单块-->
            <div class="layui-form-item">
                <!-- 表单项说明 -->
                <label class="layui-form-label">员工编号</label>
                <!-- 表单组件 -->
                <div class="layui-input-inline">
                    <input type="text" name="empNo" value="${empNo}" id="eNo" class="layui-input" lay-verify="required|number" disabled/>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="eName" class="layui-input" lay-veiry="eName"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">工作岗位</label>
                <div class="layui-input-inline">
                    <input type="text" name="job" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">直属经理</label>
                <div class="layui-input-inline">
                    <select name="mgr" id="mgr">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">入职时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="hireDate" class="layui-input" id="hireDate"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">工资</label>
                <div class="layui-input-inline">
                    <input type="text" name="sal" class="layui-input" lay-verify="number"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">奖金</label>
                <div class="layui-input-inline">
                    <input type="text" name="comm" class="layui-input" lay-verify="number"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-inline">
                    <select name="deptNo" id="dept">

                    </select>
                </div>
            </div>

            <!-- 按钮部分
                lay-submit 声明它是一个提交按钮
            -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit  lay-filter="empForm">保存</button>
                    <button class="layui-btn" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    var form,layer,layDate,currentEmp,util; //currentEmp代表当前的员工
    layui.use(['layer','form','laydate','util'],function(){
        form = layui.form;
        layer = layui.layer;
        layDate = layui.laydate;
        util = layui.util;

        //动态渲染下拉框   所有员工的列表  所有部门的列表
        $.ajax({
            url : '${path}/emp/queryEmpsAndDepts/${empNo}',
            dataType : 'json',
            success : function(data){
                console.log(data);
                //动态为经理下拉框生成选项
                var empList = data.empList;
                for(i=0;i<empList.length;i++){
                    var eName = empList[i].eName;//员工姓名
                    var empNo = empList[i].empNo;//员工号
                    $('#mgr').append('<option value="'+ empNo+'">' + eName + '</option>');
                }
                //动态为部门下拉框生成选项
                var deptList = data.deptList;
                for(i=0;i<deptList.length;i++){
                    var deptNo = deptList[i].deptNo;//部门编号
                    var dName = deptList[i].dName;//部门名称
                    $('#dept').append('<option value="'+ deptNo+'">' + dName + '</option>');
                }

                //动态给表单赋值
                var emp = data.emp;
                emp.hireDate = util.toDateString(emp.hireDate,'yyyy-MM-dd');
                form.val('formDemo',emp);

                //日期选择器的初始化
                layDate.render({
                    elem : '#hireDate',  //要渲染时间组件的元素对象
                    type : 'date',
                    value : emp.hireDate
                });

                //让layui的form表单，重新渲染一次整个表单
                form.render();
            }
        });
    });
</script>
</html>
